<template>
  <Form
    :model="searchForm"
    ref="formSearch"
    slot="search-bar"
    label-position="left"
    :label-width="80"
    class="ivu-form-no-margin-bottom"
    inline
  >
    <!-- 导出按钮 -->
    <Row :gutter="20" class="code-row-bg row-button">
      <Col :xs="24" :sm="10" :md="10" :lg="8" :xxl="6" style="border:none;">
        <Form-item>
          <RPButton :text="$t('module.exportImport.import')" @click="selectFile" />
          <input type="file" ref="selectFile" style="display:none" @change="importData" />
        </Form-item>
      </Col>
    </Row>
    <!-- 选择框 -->
    <Row :gutter="20" class="code-row-bg row-select">
      <!-- 导入模块 -->
      <Col :xs="24" :sm="10" :md="10" :lg="8" :xxl="6" style="border:none;">
        <Form-item :label="$t('module.exportImport.importModelName')">
          <Select v-model="searchForm.modelCode" style="width:200px" >
            <Option
              v-for="model in modelList"
              :value="model.vsiDescription"
              :key="model.vsiKey"
            >{{model.vsiValue}}</Option>
          </Select>
        </Form-item>
      </Col>
    </Row>
  </Form>
</template>
<script>
import locales from "./locales.js";
// import { CoreModuleName } from "@/const.js";
// import { findTenantList, listProductByTenantCode } from "@api/teantManageAPI";
// import { GetItemValueByVsiId } from "@api/valuesetCodeApi";
// import { GetTenantByCode, getApplicationByProductCode } from "@api/applicationApi";

export default {
  mixins: [locales],
  data() {
    return {
      modelList: [],
      searchForm: {
        modelCode: 1
      }
    };
  },
  // computed:{
  //   modelList(){
  //     return  [
  //       {
  //         modelName: this.$t('module.exportImport.valueSet'),
  //         modelCode: 1
  //       },
  //       {
  //         modelName: this.$t('module.exportImport.function'),
  //         modelCode: 2
  //       },
  //       {
  //         modelName: this.$t('module.exportImport.resource'),
  //         modelCode: 3
  //       },
  //       {
  //         modelName: this.$t('module.exportImport.role'),
  //         modelCode: 4
  //       },
  //       {
  //         modelName: this.$t('module.exportImport.permissions'),
  //         modelCode: 5
  //       }
  //       // {
  //       //   modelName: this.$t('module.exportImport.post'),
  //       //   modelCode: 5
  //       // }
  //     ]
  //   }
  // },
  created() {
    this.getBasicDataList()
  },
  methods: {
    getBasicDataList () {
      $http.get(`${window.RPConfig.setting}/valueset/vsItem/list`, {vsCode: 'BASIC_DATA_TYPE'}).then((res) => {
        const rescords = res.data
        if (rescords.length) {
          this.searchForm.modelCode = rescords[0].vsiDescription
        }
        this.modelList = rescords
        
      });
    },
    checkFileType: function(fileType) {
      const acceptTypes = ["xls", "xlsx"];
      for (var i = 0; i < acceptTypes.length; i++) {
        if (fileType === acceptTypes[i]) {
          return true;
        }
      }
      return false;
    },
    importData(e) {
      const inputCom = e.target;
      const files = inputCom.files;
      let param = new FormData();
      [].forEach.call(files, file => {
        if (!this.checkFileType(file.name.split(".").pop())) {
          this.$message.error({
            content: this.$t("module.exportImport.importFileExtensionError"),
            duration: 3
          });
          return false;
        } else {
          param.append("file", file);
        }
      });

      if (param.get("file")) {
        //添加请求头
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };

        this.showUploading();
        $http
          .post(`/apis/${this.searchForm.modelCode}/importExcel`, param, null, config)
          .then(response => {
            inputCom.value = "";
            this.$message.success({
              content: this.$t("module.exportImport.importSuccess"),
              duration: 3
            });
            this.hideUploading();
          })
          .catch(() => {
            inputCom.value = "";
            this.hideUploading();
          });
      }
    },
    selectFile() {
      this.$refs.selectFile.click();
    },
    hideUploading() {
      this.$Spin.hide();
    },
    showUploading() {
      this.$Spin.show({
        render: h => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18
              }
            }),
            h("div", this.$t("module.exportImport.uploading"))
          ]);
        }
      });
    },
    // getServicePath() {
    //   let apiPath;
    //   switch (this.searchForm.modelCode) {
    //     case 1:
    //       apiPath = "setting/valueset";
    //       break;
    //     case 2:
    //       apiPath = "mgt/menu";
    //       break;
    //     case 3:
    //       apiPath = "mgt/resource";
    //       break;
    //     case 4:
    //       apiPath = "mgt/role";
    //       break;
    //     // case 5:
    //     //   apiPath = "mgt/post";
    //     //   break;
    //     case 5:
    //       apiPath = "mgt/datapolicy";
    //       break;
    //   }

    //   return `/apis/${apiPath}/importExcel`;
    // }
  }
};
</script>
<style lang="less">
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>